<template>
  <custom-window :title="title">
    <div slot="header-right">
      <div class="r-date">
        <el-date-picker
          v-model="yearValue"
          type="month"
          :append-to-body="false"
          placeholder="请选择月份"
          value-format="yyyy-MM"
          format="yyyy-MM"
          :clearable="false"
          @change="changeDate"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="content">
      <div class="echarts" ref="echarts1" id="chart1"></div>
    </div>
  </custom-window>
</template>

<script>
import CustomWindow from '@/components/CustomWindow'
import minxin from '@/utils/mixin'
export default {
  mixins: [minxin],
  name: 'CardItem5',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomWindow
  },
  data () {
    return {
      yearValue: ''
    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.yearValue = this.$dayjs(new Date()).format('YYYY-MM')
    this.getData().then(() => {
      this.initTimer()
    })
  },
  beforeDestroy () {
    clearInterval(this._timer)
  },
  methods: {
    initTimer () {
      this._timer = setInterval(this.getData, 60 * 60 * 1000)
    },
    changeDate (val) {
      console.log('val: ', val)
      this.getData()
    },
    getData () {
      return this.$axios.get(this.$apis.screen.selectYgInfoMonthList, {
        yearMonth: this.yearValue
      }).then(res => {
        console.log('res2: ', res)
        if (res) {
          this.initChart(res)
        }
      })
    },

    initChart (data) {
      console.log('data: ', data)
      const dataX = data.ygCode || []
      // const dataX = ['大豆油', '橄榄油', '花生油', '大豆油2']
      const cyData = data.ygType2 || []
      const syData = data.ygType1 || []
      this.$nextTick(() => {
        const chart = this.$getChartInstance('#chart1')
        const options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: '#0082CF70',
            borderColor: '#2880FF',
            borderWidth: 1,
            textStyle: {
              color: '#fff',
              fontSize: this.$px2vw(14)
            }
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '4%',
            top: '13%',
            containLabel: true
          },
          legend: {
            data: ['发油', '收油'],
            right: 10,
            top: 2,
            textStyle: {
              color: '#fff',
              fontSize: this.$px2vw(14)
            },
            itemWidth: 10,
            itemHeight: 10,
            type: 'scroll',
            orient: 'horizontal',
            itemGap: 14
          },
          xAxis: {
            type: 'category',
            data: dataX,
            axisLine: {
              lineStyle: {
                color: '#0A476E'

              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$px2vw(12)
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },

          yAxis: {
            type: 'value',
            name: '吨',
            nameTextStyle: {
              color: '#ffffff70',
              fontSize: this.$px2vw(14),
              verticalAlign: 'middle',
              align: 'center'
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#0A476E'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$px2vw(12)
              }
            }

          },
          // dataZoom: [{
          //   show: true,
          //   height: 12,
          //   xAxisIndex: [
          //     0
          //   ],
          //   bottom: '3%',
          //   showDataShadow: true,
          //   start: 0,
          //   end: 30,
          //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          //   handleSize: '100%',
          //   handleStyle: {
          //     color: '#d3dee5'

          //   },
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: 14,
          //     height: 0
          //   },
          //   borderColor: '#90979c'
          // }],
          series: [

            {
              name: '发油',
              type: 'bar',
              barWidth: 10,
              stack: '总量',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#8bd46e'
                  }, {
                    offset: 1,
                    color: '#09bcb7'
                  }]),
                  barBorderRadius: 6
                }

              },
              data: cyData
            },
            {
              name: '收油',
              type: 'bar',
              barWidth: '18',
              stack: '总量',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                  }, {
                    offset: 1,
                    color: '#6851f1'
                  }]),
                  barBorderRadius: 6
                }
              },
              data: syData
            }]
        }

        chart.clear()
        chart.setOption(options)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  // do something
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
.r-date {
  ::v-deep .el-date-editor {
    border: 1px solid #04577e;
    height: 38px;
    border-radius: 4px;
    background-color: transparent;

    width: 120px;

    .el-input__inner {
      background-color: transparent;
      border: none;
      text-align: center;
      color: #63bdf1;
      font-size: 16px;
      display: flex;
      align-items: center;
      line-height: 38px;
      justify-content: center;
      height: 100%;
      padding-right: 10px;
    }

    .el-input__prefix {
      color: #63bdf1;
      transform: translateY(-1px);
      font-size: 14px;
    }
  }
}
</style>
